<template>
  <div>
    <!-- list-type	文件列表的类型	string	text/picture/picture-card -->
    <el-upload
      :class="{ disabled: isDisabled }"
      action="#"
      list-type="picture-card"
      :file-list="filelist"
      :on-preview="handlePictureCardPreview"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="uploadImg"
      :on-change="handleChange"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog
      title="预览图片"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <img :src="imgUrl" alt="" style="display: block; margin: 0 auto" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    limit: {
      // 数据类型最大上传个数上传
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      showDialog: false,
      dialogImageUrl: '',
      dialogVisible: false,
      imgUrl: '',
      filelist: [
        {
          name: '二货1',
          url: 'https://img0.baidu.com/it/u=204571169,389367625&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1680886800&t=9a912119f7c87cd01662c3178146a8a8'
        },
        {
          name: '二货2',
          url: 'https://img1.baidu.com/it/u=2127929742,1350422070&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        }
      ]
    }
  },
  computed: {
    isDisabled() {
      // console.log(this.fileList.length)
      return this.filelist.length >= this.limit
    }
  },
  methods: {
    // 删除图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
      // 方式一
      // this.fileList = [...fileList]
      // 方式二
      this.fileList = this.fileList.filter((item) => item.uid !== file.uid)
    },
    // 图片预览
    handlePictureCardPreview(file) {
      // file点击预览时的拿到的图片对象
      console.log(file)
      this.imgUrl = file.url
      this.showDialog = true
    },
    uploadImg(obj) {
      console.log(123)
    },
    handleChange(file, fileList) {
      this.fileList = [...fileList]
      console.log(file, fileList)
    }
  }
}
</script>
<style scoped lang="scss">
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
